Hice lo que me permitirá clonar un div, arrastrarlo y soltarlo dentro de un área desplegable y luego cambiar el tamaño del div clonado.

Sin embargo, estoy tratando de contener el div clonado solo dentro del área desplegable, usando el parámetro de containment , pero fallé. Aunque el parámetro de contención funcionó al arrastrar el div clonado desde el div original al principio, pero una vez que lo dejo caer dentro del div desplegable, no puedo controlar la contención.

Aquí está el código hasta ahora:

 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <div class="draggable" style="background:lightgray;width:50px;">item</div> <br/><br/><br/> <div id="droppable" style="border:1px solid gray;width:500px;height:500px;"></div> <script> $(function() { $(".draggable").draggable({ revert: "invalid", containment: "#droppable", helper: "clone", cursor: "move" }); $("#droppable").droppable({ accept: ".draggable", containment: "#droppable", drop: function( event, ui ) { ui.draggable.clone().appendTo($(this)).draggable().removeClass("draggable").addClass("draggable2"); $(".draggable2").resizable(); } }); }); </script>

Y aquí está el violín para jugar.

Tenga en cuenta que:

• Puedo arrastrar y soltar el div que se puede arrastrar dentro del div que se puede soltar
• Puedo cambiar el tamaño del único div clonado
• Puedo restringir la contención del div arrastrable clonado solo en el primer arrastre desde el div original.
• Pero cuando dejo caer el div clonado, la contención se restablece a toda la página.

\ Intenté agregar esto, no hay esperanza.

 $('.draggable2').draggable({ revert: 'invalid', containment: '#droppable', cursor: 'move', });

Cualquier ayuda es muy apreciada.